"use strict";

window.onload = function () {
  // 点击小图，大图跟着改变，bigimgIndex是大图所在数据的位置的位置
  let bigimgIndex = 0;
  // 放大镜效果
  shiftInMagnifyingGlass();
  function shiftInMagnifyingGlass() {
    //图片数据
    const dataPhoto = goodData.imagessrc;
    const smallPhoto = document.querySelector(
      "#content #contentMain .major .left .leftTop .smallPhoto"
    );
    // 打开页面时把数据的第一张图片作为小图展示
    const smallImg = document.createElement("img");
    smallImg.src = dataPhoto[0].s;
    smallPhoto.appendChild(smallImg);

    // 鼠标移入small框时
    smallPhoto.addEventListener("mouseenter", function (event) {
      // 显示静态蒙版和大图
      const maskDiv = document.createElement("div");
      maskDiv.className = "mask";
      smallPhoto.appendChild(maskDiv);

      // 大图元素  动态渲染
      const bigDiv = document.createElement("div");
      bigDiv.className = "bigPhoto";
      const bigImg = document.createElement("img");
      //动态改变大图元素
      bigImg.src = dataPhoto[bigimgIndex].b;
      bigDiv.appendChild(bigImg);

      const leftTop = document.querySelector(
        "#content #contentMain .major .left .leftTop"
      );
      leftTop.appendChild(bigDiv);
      // 蒙版元素的移动
      smallPhoto.addEventListener("mousemove", function (event) {
        // let left = event.clientX - smallPhoto.getBoundingClientRect().x  + maskDiv.offsetWidth / 2
        // let top = event.clientY - smallPhoto.getBoundingClientRect().y  + maskDiv.offsetHeight / 2

        var left =
          event.clientX -
          smallPhoto.getBoundingClientRect().left -
          maskDiv.offsetWidth / 2;
        var top =
          event.clientY -
          smallPhoto.getBoundingClientRect().top -
          maskDiv.offsetHeight / 2;
        left = left < 0 ? 0 : left;
        // 当你把mask元素放到与定位元素相关的(0,0)点时，向右可移动的距离恰好就是smallPhoto.clientWidth - maskDiv.clientWidth
        left =
          left > smallPhoto.clientWidth - maskDiv.clientWidth
            ? smallPhoto.clientWidth - maskDiv.clientWidth
            : left;
        top = top < 0 ? 0 : top;
        top =
          top > smallPhoto.clientHeight - maskDiv.clientHeight
            ? smallPhoto.clientHeight - maskDiv.clientHeight
            : top;

        maskDiv.style.left = left + "px";
        maskDiv.style.top = top + "px";

        // 大图移动效果
        /**
         * 1.移动的距离用比例尺计算出来
         * 2.鼠标从小图上往右移动的时候，大图从右往左移动，left/top 加负号
         */
        const proportion = bigImg.offsetWidth / smallPhoto.offsetWidth;
        bigImg.style.left = -left * proportion + "px";
        bigImg.style.top = -top * proportion + "px";
      });
      //   鼠标移出small框时,移除蒙版元素和大图片
      smallPhoto.addEventListener("mouseleave", function () {
        maskDiv.remove();
        bigDiv.remove();
      });
    });
  }

  // 动态渲染轮播图图片
  MapThumbnail();
  function MapThumbnail() {
    // 获取图片数据
    const imgData = goodData.imagessrc;
    const thumbnail = document.querySelector(
      "#content #contentMain .major .left .leftBottom .picList #thumbnail"
    );
    // 遍历gooData.imagessrc
    for (const key in imgData) {
      const li = document.createElement("li");
      const img = document.createElement("img");
      img.src = imgData[key].s;
      li.appendChild(img);
      thumbnail.appendChild(li);
    }
  }
  // 点击缩略图效果
  clickThumbnail();
  function clickThumbnail() {
    // 图片数据
    const imgData = goodData.imagessrc;
    const imgs = document.querySelectorAll(
      "#content #contentMain .major .left .leftBottom .picList #thumbnail li img"
    );
    const smallPhoto = document.querySelector(
      "#content #contentMain .major .left .leftTop .smallPhoto img"
    );
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].index = i;
      imgs[i].addEventListener("click", function () {
        bigimgIndex = this.index;
        smallPhoto.src = imgData[i].s;
      });
    }
  }

  //轮播图效果
  clickArrowShiftPhoto();
  function clickArrowShiftPhoto() {
    // 左箭头
    // const leftArrow = document.querySelector(
    //   "#content #contentMain .major .left .leftBottom a:firstChild"
    // );
    const leftArrow = document.querySelector(
      "#content #contentMain .major .left .leftBottom a.prev"
    );
    const rightArrow = document.querySelector(
      "#content #contentMain .major .left .leftBottom a.next"
    );
    // const rightArrow = document.querySelector(
    //   "#content #contentMain .major .left .leftBottom a:lastChild"
    // );
    const lis = document.querySelectorAll(
      "#content #contentMain .major .left .leftBottom .picList #thumbnail li"
    );
    const ul = document.querySelector(
      "#content #contentMain .major .left .leftBottom .picList #thumbnail"
    );
    let start = 0;
    // 步长
    const step = (lis[0].offsetWidth + 20) * 2;
    // 最大移动距离
    const largest = (lis.length - 5) * (lis[0].offsetWidth + 20);

    leftArrow.addEventListener("click", function () {
      start -= step;
      if (start < 0) {
        start = 0;
      }
      ul.style.left = -start + "px";
    });
    rightArrow.addEventListener("click", function () {
      start += step;
      if (start > largest) {
        start = largest;
      }
      ul.style.left = -start + "px";

    });
  }

  



  //   window.onload
};
